<template>
  <view class="page-u">
    <button
      class="avatar"
      open-type="chooseAvatar"
      @chooseavatar="handleChooseAvatar"
    >
      <u-avatar
        :src="userAvatarUrl || '/static/my/def-user-avatar.png'"
        size="130rpx"
      />
      <view class="photo-img">
        <u-icon name="/static/my/camera-img.png" size="42rpx" />
      </view>
    </button>

    <view class="input-box">
      <text class="input-label">昵称</text>
      <input
        :value="userName"
        class="h-80rpx flex-1"
        type="nickname"
        placeholder="请填写昵称"
        placeholder-style="color:#ccc;font-size:32rpx;"
        @input="handleInput"
      />
    </view>

    <view class="p-30rpx mt-72rpx">
      <u-button
        color="#386ee8"
        :custom-style="{ borderRadius: '20rpx' }"
        :throttle-time="600"
        text="提交"
        :loading="btnLoading"
        @click="handleClickSubmit"
      />
    </view>
  </view>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

import { uploadFile } from '@/api/sys/oss'
import { userStore } from '@/store/modules'
import { showToast } from '@/utils/helper/uniHelper'

import { updateMiniUserInfo } from './service'

@Component({ name: 'UserinfoForm' })
export default class UserinfoForm extends Vue {
  userAvatarUrl = ''
  userName = ''

  btnLoading = false

  handleChooseAvatar({ detail }: Recordable) {
    this.userAvatarUrl = detail.avatarUrl
  }

  handleInput({ detail }: Recordable) {
    this.userName = (detail.value as string).trim()
  }

  onReady() {
    const { avatar = '', nickname = '' } = userStore.authUserInfo.miniUser ?? {}
    this.userAvatarUrl = avatar
    this.userName = nickname
  }

  async handleClickSubmit() {
    if (!this.userAvatarUrl) return showToast('请补充头像信息')
    if (!this.userName) return showToast('请填写昵称')
    this.btnLoading = true

    try {
      const avatarUrl = this.userAvatarUrl.includes('//tmp')
        ? await uploadFile(this.userAvatarUrl, false)
        : this.userAvatarUrl
      await updateMiniUserInfo({
        avatar: avatarUrl,
        nickname: this.userName
      })
      uni.hideLoading()
      await Promise.all([showToast('保存成功！'), userStore.getAuthUserInfo()])
      uni.navigateBack()
    } finally {
      this.btnLoading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.page-u {
  min-height: 100vh;
  background: #ffffff;
  padding-top: 60rpx;
}

.avatar {
  width: max-content;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.input-box {
  margin-top: 72rpx;
  display: flex;
  height: 106rpx;
  align-items: center;

  border-top: 1rpx solid #eeeeee;
  border-bottom: 1rpx solid #eeeeee;

  .input-label {
    width: 154rpx;
    text-align: center;
    height: 80rpx;

    font-weight: 400;
    font-size: $font-size-xl;
    line-height: 80rpx;
    color: $color-second-text;
  }
}

.photo-img {
  position: absolute;
  right: 0;
  bottom: 0;
}

button {
  &:after {
    content: none;
  }
  &:hover {
    background-color: transparent;
  }
}
</style>
